<template>
  <div class="web">
    <div id="svga" class="svgaBox"></div>
    <el-button @click="handleClickButtonPause">Pause</el-button>
    <el-button @click="handleClickButtonPlay">Play</el-button>
    <el-button @click="handleClickButtonReplace">Replace</el-button>
  </div>
</template>

<script>
  import SVGA from 'svgaplayerweb'

  export default {
    data() {
      return {
        svgPlayer: null,
        svgParser: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.svgPlayer = new SVGA.Player('#svga')
        this.svgParser = new SVGA.Parser('#svga')
        // 注意，这里必须是服务器地址，否则报错
        this.svgPlayer.loops = 0
        this.svgPlayer.clearsAfterStop = false
        this.svgParser.load('/svga/huojiang.svga', (videoItem) => {
          console.log('videoItem', videoItem)
          this.svgPlayer.setVideoItem(videoItem)
          // this.svgPlayer.startAnimation()
          // this.svgPlayer.startAnimationWithRange({location: 0, length: 40})
          this.svgPlayer.startAnimationWithRange({location: 40, length: 63})
        })
        this.svgPlayer.onFinished(e => {
          console.log('onFinished', e)
          this.svgPlayer.startAnimationWithRange({location: 40, length: 76})
        })
      })
    },
    methods: {
      handleClickButtonPause() {
        this.svgPlayer.pauseAnimation()
      },
      handleClickButtonPlay() {
        this.svgPlayer.startAnimationWithRange({location: 10, length: 20})
      },
      handleClickButtonReplace() {
        this.svgPlayer.setImage('/imgs/9.jpg', 'img_13')
      }
    }
  }
</script>

<style scoped lang="scss">
  .svgaBox {
    width: 375px;
    height: 812px;
    margin: auto;
    background-color: #000000;
  }
</style>
